<template>
	<div :class="[liveInvitationBoxClass]">
		<div class="invitation-list-connect">
			<ul v-if='isGRPM'>
				<li>
					<div class="list-left" v-if="personageData.c==0">
						<span class="no-personage">未进入排名</span>
					</div>
					<div class="list-left row-big-box" v-else>
						<p class="rowNo-num">{{personageData.rowNo}}</p>
						<p class="rowNo-pm">我的排名</p>
					</div>
					<div class="list-tx">
						<img onerror="imgError()" :src="wxPic || imgTx" />
					</div>
					<span class="list-niakname">{{nickName || un}}</span>
					<span class="list-text1">邀请</span><span class="list-text2">{{personageData.c}}</span><span class="list-text3">人</span>
					<div class="list-right"></div>
					<div class="cut-off-rule-box"></div>
				</li>
			</ul>
			<ul class="InvitationListArray-box">
				<li v-for="(v,index) in InvitationListArray" :key="index">
					<template v-if="index<3">
						<div class="list-left">
							<img class="list-left list-left-img" :src="imgArray[index]" />
						</div>
						<div class="list-tx">
							<img onerror="imgError()" :src="v.avatar" />
						</div>
					</template>
					<template v-else>
						<div class="list-left">
							{{index+1}}
						</div>
						<div class="list-tx">
							<img onerror="imgError()" :src="v.avatar" />
						</div>
					</template>
					<span class="list-niakname">{{v.nick||v.fromUn}}</span>
					<span class="list-text1">邀请</span><span class="list-text2">{{v.c}}</span><span class="list-text3">人</span>
					<div class="list-right"></div>
					<hr class="line" />
				</li>
			</ul>
			<p class="clickMore" @click="clickMore">{{moreTipText}}</p>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			noNavLength:String,//noNav  没有nav
			videoInfo:Object,
		},
		data(){
			return{
				videoId: this.$route.params.id, //回看传过来的id
				liveInvitationBoxClass :'',
				InvitationListArray: [],
				InvitationListNewArray: [],
				imgArray: [
					require('../../../../assets/images/num1.png'),
					require('../../../../assets/images/num2.png'),
					require('../../../../assets/images/num3.png'),
				],
				page: 1,
				moreTipText: "",
				personageData: {}, //个人排行数据
				isGRPM:false,
				un:'',
				nickName:'',
				wxPic:'',
				getPlatform: fun.getPlatform(), //app wx
			}
		},
		created(){
			if(this.noNavLength == 'noNav'){
				if(this.$channel=='zyzq'&& this.getPlatform == 'app'){
                   this.liveInvitationBoxClass = 'no-nav-zyzq'
				}else{
                   this.liveInvitationBoxClass = 'no-nav'
				}
			    
			}else{
				if(this.$channel=='zyzq'&& this.getPlatform == 'app'){
                   this.liveInvitationBoxClass = 'live-invitation-box-zyzq';
				}else{
                   this.liveInvitationBoxClass = 'live-invitation-box';
				}
			};
			this.getInvitationList();
			if(this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) { //im 消息初始化
				this.un = this.$store.state.userInfo.un;
				this.nickName = this.$store.state.userInfo.nickname;
				this.wxPic = this.$store.state.userInfo.wxpic;
			}
		},
		computed:{
			uinfo() {
				return this.$store.state.userInfo;
			},
		},
		watch:{
			uinfo(curVal, oldVal) {
				if(curVal.un != undefined && curVal.un.length > 0) {
                   this.un = this.$store.state.userInfo.un;
				   this.nickName = this.$store.state.userInfo.nickname;
				   this.wxPic = this.$store.state.userInfo.wxpic;
				}
			},
		},
		mounted(){			
		},
			methods: {
			getInvitationList() {
				this.$http.get('/h5live/vod/shareInviteRank?vid=' + this.videoId + "&p=" + this.page).then((res) => {
					if(res.data.code == '000000') {
						if(!this.$store.state.isYk){//游客不展示 个人信息
								this.isGRPM = true;
								this.personageData = res.data.data.myRank;//个人排名
							}
						
						this.InvitationListArray = res.data.data.statList; //整个数组
						if(this.InvitationListArray.length >= 10) {
							this.moreTipText = "查看更多分享榜单"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			clickMore() {
				this.page++
					let _this = this;
				_this.$http.get('/h5live/vod/shareInviteRank?vid=' + _this.videoId + "&p=" + _this.page).then((res) => {
					if(res.data.code == '000000') {
						_this.InvitationListNewArray = res.data.data.statList; //整个数组
						for(var i = 0; i < _this.InvitationListNewArray.length; i++) {
							_this.InvitationListArray.push(_this.InvitationListNewArray[i]);
						}
						if(_this.InvitationListNewArray.length == 0) {
							_this.moreTipText = "没有更多数据"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
		}
	}
</script>

<style scoped="scoped">
    ::-webkit-scrollbar {
		display: none; /* Chrome Safari */
		}
	.live-invitation-box{
		width:100%;
		flex: 1;
		background: white;
	}
	.no-nav{
		/*position: absolute;	*/
		width: 100%;
		height: auto;
		background: white;
	}
	.live-invitation-box .invitation-list-connect {
		width: 100%;
		height: auto;
		overflow: scroll;
	}
   .no-nav .invitation-list-connect {
		width: 100%;
		height: auto;
		overflow: scroll;
	}

	.invitation-list-connect ul li {
		width: 100%;
		height: 115px;
	}
	.invitation-list-connect ul li span {
		color: #b5b5b5;
		font-size: 28px;
		line-height: 115px;
	}
	.clickMore {
		width: 100%;
		font-size: 30px;
		color: #b5b5b5;
		text-align: center;
		margin: 20px 0 30px;
		line-height: 50px;
	}
   .list-left {
		width: 150px;
		height: 115px;
		line-height: 115px;
		text-align: center;
		font-size: 24px;
		color: #494949;
		float: left;
		background-size: 49px 75px;
		display: flex;
		justify-content: center;
	}

	.list-left-img {
		width: 55px;
		height: 75px;
		border: none;
		background-size: 49px 75px;
		margin: 20px 0 0 0;
	}
    .no-personage {
		color: #D62F2F !important;
		font-size: 26px !important;
	}
	.row-big-box {
		width: 150px;
		display: felx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		line-height: 20px !important;
	}
	.rowNo-num {
		color: #666666 !important;
		font-size: 36px !important;
		margin-top: 10px;
	}
    .rowNo-pm {
		color: #D62F2F !important;
		font-size: 22px !important;
		margin-top: 20px;
	}
   	.list-tx {
		width: 66px;
		height: 115px;
		display: inline-block;
		float: left;
		border-radius: 50%;
		background-size: 65px 65px;
		position: relative;
	}

	.list-tx img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		margin-top: 27px;
		background-size: 65px 65px;
	}
   .list-niakname {
		width: 250px;
		height: 115px;
		float: left;
		margin-left: 32px;
		line-height: 115px;
		text-align: left;
		font-size: 28px;
		color: #6b6969 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
   .list-text1 {
		margin-left: 10px;
	}
	.list-text2 {
		width: 90px;
		height: 115px;
		display: inline-block;
		text-align: center;
		color: rgb(204, 53, 56) !important;
	}

	.list-text3 {
		margin: 0 20px 0 5px;
	}
	.list-right {
		width: 17px;
		height: 115px;
		background: url(../../../../assets/images/to_11.png) no-repeat center center;
		float: right;
		margin-right: 22px;
		background-size: 17px 29px;
		animation: ruan 3s linear infinite;
	}
		.cut-off-rule-box {
		width: 100%;
		height: 20px;
		background: rgba(249, 249, 249, 1);
	}
	.InvitationListArray-box {
		margin-top: 25px;
	}
	.line {
		width: 88%;
		background: #e2e2e2!important;
		margin-left: 40px;
		height: 2px;
		border: none;
	}
	@keyframes ruan {
		0% {
			transform: translateY(-10px);
		}
		50% {
			transform: translateY(10px);
		}
		100% {
			transform: translateY(-10px);
		}
	}
	
</style>